<template>
    <div class="platform">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            平台设置
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="card-add">
                    <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                        <div class="ivu-card-head">
                            <p data-v-57b29fc1="">平台设置</p>
                        </div>
                        <div class="ivu-card-body"> 
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="160" style="width:30%">
                                <!-- <FormItem label="个人代理提成" prop="self_rate">
                                    <Input v-model="formValidate.self_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem> -->
                                <!-- <FormItem label="个人代理订单收益提成比" prop="self_profit_rate">
                                    <Input v-model="formValidate.self_profit_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem> -->
                                <!-- <FormItem label="推广员订单收益提成比" prop="promoters_profit_rate">
                                    <Input v-model="formValidate.promoters_profit_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem> -->
                                <FormItem label="优秀一级用户" prop="promoters_rate">
                                    <Input v-model="formValidate.promoters_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                                <!-- <FormItem label="区县代理提成" prop="area_rate">
                                    <Input v-model="formValidate.area_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                                <FormItem label="市级代理提成" prop="city_rate">
                                    <Input v-model="formValidate.city_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                                <FormItem label="省级代理提成" prop="province_rate">
                                    <Input v-model="formValidate.province_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem> -->
                                <FormItem label="优秀二级用户" prop="one_rate">
                                    <Input v-model="formValidate.one_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                                <FormItem label="优秀三级用户" prop="two_rate">
                                    <Input v-model="formValidate.two_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                                <!-- <FormItem label="三级优秀用户" prop="three_rate">
                                    <Input v-model="formValidate.three_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem> -->
                                <FormItem label="一级用户抢单收益" prop="one_order_rate">
                                    <Input v-model="formValidate.one_order_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                                <FormItem label="二级用户抢单收益" prop="two_order_rate">
                                    <Input v-model="formValidate.two_order_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                                <FormItem label="三级用户抢单收益" prop="three_order_rate">
                                    <Input v-model="formValidate.three_order_rate">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                                <!-- <FormItem label="跑腿代买" prop="errandMoney">
                                    <Input v-model="formValidate.errandMoney">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem> -->
                                <FormItem label="共享信息发布费" prop="publish_price">
                                    <Input v-model="formValidate.publish_price" >
                                        <span slot="prepend">￥</span>
                                    </Input>
                                </FormItem>
                                <FormItem label="共享人力平台收费百分比" prop="publish_rate">
                                    <Input v-model="formValidate.publish_rate" >
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                                <!-- <FormItem label="省级代理数量限制" prop="province_count">
                                    <Input v-model="formValidate.province_count" />
                                </FormItem>
                                <FormItem label="市级代理数量限制" prop="city_count">
                                    <Input v-model="formValidate.city_count" />
                                </FormItem>
                                <FormItem label="区县代理数量限制" prop="area_count">
                                    <Input v-model="formValidate.area_count" />
                                </FormItem>
                                <FormItem label="个人代理数量限制" prop="self_rate">
                                    <Input v-model="formValidate.self_rate" />
                                </FormItem> -->
                                <FormItem>
                                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                                    <Button @click="() => {$refs.formValidate.resetFields()}" style="margin-left: 8px">重置</Button>
                                </FormItem>
                            </Form>
                        </div>
                    </div>
                </div>
            </Content>

            <el-dialog title="身份验证" :visible.sync="dialogFormVisible" width="30%">
                <p>平台关键配置修改，需要确认管理员身份</p>
                <Form ref="form" :model="form" :rules="ruleValidate" :label-width="100" style="margin-top:20px">
                    <FormItem label="管理员密码：" prop="password" style="width:250px">
                        <Input type="password" v-model="form.password"></Input>
                    </FormItem>
                </Form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="() => {dialogFormVisible = false;$refs.form.resetFields()}">取 消</el-button>
                    <el-button type="primary" @click="submit()">确 定</el-button>
                </div>
            </el-dialog>

            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
    import * as api from '@/api/api';
    import store from "../../store/SessionStorageStore";
    export default {
        data(){
            return {
                host: window.location.host,
                loading: this.$store.state,
                formValidate: {
                    self_rate: '',
                    promote_rate: '',
                    area_rate: '',
                    city_rate: '',
                    province_rate: '',
                    one_rate: '',
                    two_rate: '',
                    three_rate: '',
                    one_order_rate: '',
                    two_order_rate: '',
                    three_order_rate: '',
                    publish_price: '',
                    province_count: '',
                    city_count: "",
                    area_count: "",
                    self_rate: "",
                    publish_rate: "",
                    self_profit_rate: '',
                    promoters_profit_rate: ''
                },
                form: {
                    password: ''
                },
                dialogFormVisible: false,
                ruleValidate: {
                    self_rate: [
                        { required: true, message: '请填写个人代理提成', trigger: 'blur' }
                    ],
                    promoters_rate: [
                        { required: true, message: '请填写推广员提成', trigger: 'blur' }
                    ],
                    // area_rate: [
                    //     { required: true, message: '请填写区县代理提成', trigger: 'blur' }
                    // ],
                    // city_rate: [
                    //     { required: true, message: '请填写市级代理提成', trigger: 'blur' }
                    // ],
                    // province_rate: [
                    //     { required: true, message: '请填写省级代理提成', trigger: 'blur' },
                    // ],
                    one_rate: [
                        { required: true, message: '请填写一级优秀用户提成', trigger: 'blur' },
                    ],
                    two_rate: [
                        { required: true, message: '请填写二级优秀用户提成', trigger: 'blur' },
                    ],
                    three_rate: [
                        { required: true, message: '请填写三级优秀用户提成', trigger: 'blur' },
                    ],
                    one_order_rate: [
                        { required: true, message: '请填写一级用户抢单收益提成', trigger: 'blur' },
                    ],
                    two_order_rate: [
                        { required: true, message: '请填写二级用户抢单收益提成', trigger: 'blur' },
                    ],
                    three_order_rate: [
                        { required: true, message: '请填写三级用户抢单收益提成', trigger: 'blur' },
                    ],
                    publish_price: [
                        { required: true, message: '请填写共享信息发布费', trigger: 'blur' },
                    ],
                    publish_rate: [
                        { required: true, message: '请填写共享人力平台收费百分比', trigger: 'blur' },
                    ],
                    self_profit_rate: [
                        { required: true, message: '请填写个人代理订单收益提成比', trigger: 'blur' },
                    ],
                    promoters_profit_rate: [
                        { required: true, message: '请填写推广员订单收益提成比', trigger: 'blur' },
                    ],
                    // province_count: [
                    //     { required: true, message: '请填写省级代理数量限制', trigger: 'blur' },
                    // ],
                    // city_count: [
                    //     { required: true, message: '请填写市级代理数量限制', trigger: 'blur' },
                    // ],
                    // area_count: [
                    //     { required: true, message: '请填写区县代理数量限制', trigger: 'blur' },
                    // ],
                    // self_rate: [
                    //     { required: true, message: '请填写个人代理数量限制', trigger: 'blur' },
                    // ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur'}
                    ]
                }
            }
        },

        created() {
            this.getSettings()
        },

        mounted(){
            
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            getSettings() {
                let body = {
                    model: 'Settings'
                }
                this.loading.isLoading = true;
                api.settingsList(body).then(res => {
                    this.loading.isLoading = false;
                   if(res.data.code === 200) {
                       this.formValidate = res.data.data;
                   }
                })
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.dialogFormVisible = true;
                    }
                })
            },
            submit() {
                let STORAGE_KEY = "Login";
                let userData = store.fetch(STORAGE_KEY);
                if(userData) {
                    var account = userData.account;
                }else {
                    var account = 'admin';
                }
                let body = {
                    account,
                    password: this.form.password
                }
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.loading.isLoading = true;
                        api.login(body).then(res => {
                            if(res.data.code === 200) {
                                let bodyData = {
                                    model: 'Settings',
                                    data: this.formValidate,
                                    update_condition: {
                                        id: '1'
                                    }
                                };
                                api.createData(bodyData).then(res => {
                                    this.dialogFormVisible = false;
                                    this.loading.isLoading = false;
                                    this.$refs.form.resetFields()
                                    if(res.data.code === 200) {
                                        this.$Notice.success({
                                            title: '提示',
                                            desc: '恭喜你，保存成功！'
                                        });
                                    }
                                })
                            }else {
                                this.$refs.form.resetFields()
                                this.dialogFormVisible = false;
                                // this.loading.isLoading = false;
                                this.getSettings();
                                this.$Notice.error({
                                    title: '错误',
                                    desc: res.data.msg + ',禁止修改！'
                                });
                            }
                        })
                    }
                })
            }
        }  
    }
</script>


<style lang="less">
    @import '../../assets/styles/constant.less';
    .platform{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .card-add{
                margin-top: 20px;
                .ivu-card-head{
                    background-color: #f2f2f2;
                }
                .ivu-card-body{
                    display: flex;
                    justify-content: space-around;
                }
                
            }
            .ivu-form-item-content {
                text-align: right;
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>